Class-less version
For wild HTML purists!
Pico provides a .classless version (example).
In this version, <header>, <main>, and <footer> act as containers to define a centered or a fluid viewport.
// Containers
body > header,
body > main,
body > footer {
…
}
Usage:
Use the default .classless version if you need centered viewports:
<link rel="stylesheet" href="css/pico.classless.min.css">Or use the .fluid.classless version if you need a fluid container:
<link rel="stylesheet" href="css/pico.fluid.classless.min.css">These .classless versions are also available on unpkg CDN:
// Centered viewport
<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.classless.min.css">
// Fluid viewport
<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.fluid.classless.min.css">
If you need to customize the default parent (<body>) for <header>, <main>, and <footer>, you can recompile Pico by defining another CSS selector.
Useful for React, Gatsby or Next.js.
/* Custom Class-less version for React */
// Set the root element
$semantic-root-element: "#root";
// Enable <header>, <main>, <footer> inside $semantic-root-element as containers
$enable-semantic-container: true;
// Enable .classes
$enable-classes: false;
// Import Pico
@import "@picocss/pico/scss/pico";The code above will compile Pico with the containers defined like this:
// Containers
#root > header,
#root > main,
#root > footer {
…
}